<template>
  <div class="evaluate_score">
    <!-- 标题 -->
    <div class="tit">
      <div class="tit_text">具体考核</div>
      <!-- <div class="criteria" @click="lookCriteria">查看评分标准</div> -->
      <div class="criteria-box">
        <div class="criteria" @click="lookCriteria">查看评分标准</div>
      </div>
    </div>

    <el-scrollbar
      class="score-con"
      :class="{ score_main: queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS'), is_end: queryRouter.isEnd }">
      <!-- 考核结果等次建议 -->
      <div class="entry_list">
        <div class="title_main_one">考核结果等次</div>
        <div class="grade_con">
          <div class="list" v-for="(item, index) in dataReasonList" :key="index">
            <div
              :class="['btn', { active: item.reasonID === assessRank, disabled: isDisabled }]"
              @click="changeOrder(item)">
              {{ item.label }}
            </div>
          </div>
          <!-- <div class="li">{{ estimateTotalScore }}</div> -->
        </div>
        <div class="grade_score" v-if="assessRank == '4'">
          <div class="reason_con">
            <span class="s_label">备注</span>
            <el-input
              v-model="reason"
              size="small"
              placeholder="请输入较差的原因"
              class="reason_ipt"
              :disabled="isDisabled"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"></el-input>
          </div>
        </div>
      </div>
      <!-- 表现 -->
      <div class="entry_list">
        <div class="title_main_one">承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现</div>
        <el-input
          placeholder="请输入承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现"
          type="textarea"
          v-model="scoringExpressionVO.expression"
          size="small"
          :disabled="isDisabled"
          :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
      </div>

      <!-- 领导点评 -->
      <div class="entry_list">
        <div class="title_main_one">
          领导点评
          <span v-if="assessRank == '3'">（等次为“一般”时，需要填写说明）</span>
        </div>
        <el-input
          placeholder="请输入领导点评"
          type="textarea"
          v-model="scoringSuggestVO.suggestion"
          size="small"
          :autosize="{ minRows: 5, maxRows: 10 }"
          :disabled="isDisabled"></el-input>
      </div>
    </el-scrollbar>

    <!-- 返回/保存 -->
    <div class="bottom">
      <!-- 分管领导评价 -->
      <template v-if="queryRouter.busSign.includes('DEAL_LEADER_ASSESS')">
        <template v-if="!isDisabled">
          <div class="b_btn back" @click="scoreBack" v-if="activeUser.status == 1">返回</div>
          <div class="b_btn commit" @click="postMark">保存</div>
        </template>
        <div class="b_btn commit" v-if="isDisabled && activeUser.status != 3" @click="editFun">编辑</div>
      </template>
      <!-- 主要领导评价 -->
      <template v-if="queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS')">
        <template>
          <div class="b_btn commit" v-if="isDisabled && activeUser.status != 3" @click="editFun">编辑</div>
          <div class="b_btn commit" v-if="!isDisabled" @click="leaderSaveFun">保存</div>
        </template>
      </template>
    </div>

    <ScoringCriteria :criteriaShow="criteriaShow" @close="closeCriteria" />
    <ClacScoreDialog ref="clacScoreDialog" :addSubList="addSubList" />
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import ScoringCriteria from './ScoringCriteria.vue'
import ClacScoreDialog from './calcScoreDialog.vue'
import { getAssessContent, saveSimpleAssess } from '@apis/evaluation.js'

export default {
  name: 'EvaluateScore',
  components: { ScoringCriteria, ClacScoreDialog },
  props: {
    activeUser: {
      type: Object,
      default: () => {
        return {}
      },
    },
    isGood: {
      type: Boolean,
      default: true,
    },
    goodNum: {
      type: Number,
      default: 0,
    },
    quarterNow: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      scoreListData: [],
      // 承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现
      scoringExpressionVO: {
        expression: '',
        voiceList: [],
      },

      // 领导点评
      scoringSuggestVO: {
        suggestion: '',
        voiceList: [],
      },
      dataReasonList: [
        { label: '好', reasonID: '1' },
        { label: '较好', reasonID: '2' },
        { label: '一般', reasonID: '3' },
        { label: '较差', reasonID: '4' },
      ],
      // 页面数据
      pageData: {},
      // 考核结果等次建议
      assessRank: '',
      // 是否评价完成
      passFlag: true,
      // 评分一般弹框
      generallyFlag: false,
      // 评分较差,
      differenceFlag: false,
      // 等次较差且没有填较差原因
      reasonFlag: false,
      // 总分
      totalScore: 0,
      // 评分标准显示隐藏
      criteriaShow: false,
      // 是否可以编辑
      isDisabled: false,
      // 主要领导打分方式
      scoreType: '1',
      queryRouter: {},
      lenderTotalScore: 0,
      suggestedOrder: '',
      addSubList: [],
      reason: '',
    }
  },
  computed: {
    ...mapGetters('evaluation', ['evSelectUserList']),
    estimateTotalScore() {
      const scoreTotallNum =
        this.scoreType === '1' ? this.totalScore : this.lenderTotalScore === undefined ? 0 : this.lenderTotalScore
      const row = this.activeUser
      /**
       * isLeaderMain:0 上级领导不是主要领导 1上级领导是主要领导
       * isOneLeader:0 有多个分管领导 1 只有一个领导(按照6 4)
       */
      return (row.leaderAssessScore * 0.8 + row.calcScore * 1 + scoreTotallNum * 0.2).toFixed(1) * 1
      // if (row.isLeaderMain === 0 && row.isOneLeader === 0) {
      //   // 有分管领导以及主要领导
      //   return (
      //     (
      //       row.leaderAssessScore * 0.4 +
      //       row.peopleAssessScore * 0.4 +
      //       row.calcScore * 1 +
      //       scoreTotallNum * 0.2
      //     ).toFixed(1) * 1
      //   )
      // } else if (/* row.isLeaderMain === 1 && */ row.isOneLeader === 1) {
      //   // 分管领导和主要领导是一个人
      //   return (scoreTotallNum * 0.6 + row.peopleAssessScore * 0.4 + row.calcScore * 1).toFixed(1) * 1
      // } else if ((row.isLeaderMain === 1 && row.isOneLeader === 0) || row.isMainLead === 1) {
      //   // 有分管领导和主要领导是一个人
      //   return (scoreTotallNum * 0.5 + row.peopleAssessScore * 0.5 + row.calcScore * 1).toFixed(1) * 1
      // }
    },
    // 是否显示分管领导评分
    isShowChargeLender() {
      const row = this.activeUser
      /**
       * isLeaderMain:0 上级领导不是主要领导 1上级领导是主要领导
       * isOneLeader:0 有多个分管领导 1 只有一个领导(按照6 4)
       */
      if (row.isLeaderMain === 0 && row.isOneLeader === 0) {
        // 有分管领导以及主要领导 442
        return 1
      } else if (/* row.isLeaderMain === 1 &&  */ row.isOneLeader === 1) {
        // 分管领导和主要领导是一个人 46
        return 2
      } else if ((row.isLeaderMain === 1 && row.isOneLeader === 0) || row.isMainLead === 1) {
        // 有分管领导和主要领导是一个人 55
        return 3
      } else {
        return ''
      }
    },
  },
  watch: {
    activeUser() {
      this.changeActiveUser()
    },
    assessRank: {
      handler(news) {
        this.$nextTick(() => {
          this.assessFilter(news)
        })
      },
      deep: true,
      immediate: true,
    },
    quarterNow: {
      handler(news) {
        console.log(news)
      },
      immediate: true,
    },
  },
  created() {
    this.queryRouter = this.$route.query
  },
  mounted() {
    this.changeActiveUser()
  },
  methods: {
    ...mapMutations('evaluation', ['setEvSelectUserList', 'setChangeUserID']),
    changeActiveUser() {
      // 已经评价
      if (this.activeUser.status === 2 || this.activeUser.status === 3) {
        this.isDisabled = true
      } else {
        this.isDisabled = false
      }
      if (this.activeUser.status === 1 || this.activeUser.status === 2 || this.activeUser.status === 3) {
        this.pageGetAssessContent()
      }
    },
    // 查看评分标准
    lookCriteria() {
      this.criteriaShow = true
    },
    // 关闭评分标准
    closeCriteria() {
      this.criteriaShow = false
      this.historyShow = false
    },
    // 等次建议
    changeOrder(item) {
      if (this.isDisabled) return

      if (this.assessRank === item.reasonID) return
      if (item.reasonID === '1' && !this.isGood) {
        const str = `本次拟评价“好”等次${this.goodNum}人，现已${this.goodNum}人，如需评定为“好”，请更改其他评价`
        return this.$message.warning(str)
      }
      if (item.reasonID === '3') {
        this.$alert('等次为“一般”时，需要填写说明。', '提示', {
          confirmButtonText: '确定',
        })
      }
      if (item.reasonID === '4') {
        this.$alert('等次为“较差”时，需要说明原因。', '提示', {
          confirmButtonText: '确定',
        })
      }
      this.reason = ''
      this.assessRank = item.reasonID
    },
    // 获取指标评价内容
    async pageGetAssessContent() {
      const { data } = await getAssessContent({
        busSign: this.activeUser.bussign || this.queryRouter.busSign,
        noteId: this.activeUser.noteId,
      })

      if (data.scoringSuggestVO) {
        this.scoringSuggestVO = data.scoringSuggestVO
      } else {
        this.scoringSuggestVO = {
          suggestion: '',
          voiceList: [],
        }
      }

      if (data.scoringExpressionVO) {
        this.scoringExpressionVO = data.scoringExpressionVO
      } else {
        this.scoringExpressionVO = {
          expression: '',
          voiceList: [],
        }
      }

      this.scoreType = data.scoringMode || '1'
      this.lenderTotalScore = data.totalScore

      this.assessRank = data.assessRank || data.mainLeaderAssessRank
      this.reason = data.remark
    },
    // 返回
    scoreBack() {
      this.$emit('setScoreType')
    },

    // 判断数据是否已经填写完
    postMark() {
      if (!this.assessRank) {
        return this.$message.warning('请选择考核结果等次')
      }
      if (this.assessRank === 4 && !this.reason.trim()) {
        return this.$alert('根据评价规则，评为“较差”等次，必须输入较差的原因', '提示', {
          confirmButtonText: '确定',
        })
      }

      if (this.assessRank === 3 && !this.scoringSuggestVO.suggestion.trim()) {
        return this.$alert('根据评价规则，评为“一般”等次，需要填写领导点评', '提示', {
          confirmButtonText: '确定',
        })
      }

      this.setLeaderAddSaScore()
    },

    localChangeEvSelectUserList() {
      const listData = this.evSelectUserList
      for (let index = 0; index < listData.length; index++) {
        const el = listData[index]
        if (el.saScoringId === this.activeUser.saScoringId) {
          if (this.queryRouter.busSign.includes('DEAL_LEADER_ASSESS')) {
            el.totalScore = this.totalScore
            el.status = 2
            el.assessRank = this.assessRank
          } else {
            el.mainLeaderAssessScore = this.scoreType === '1' ? this.totalScore : this.lenderTotalScore
            el.status = 2
            el.mainLeaderAssessRank = this.assessRank
          }
          break
        }
      }
      this.setEvSelectUserList(listData)
    },
    // 主管领导提交打分
    leaderSaveFun() {
      this.setLeaderAddSaScore()
    },
    // 主管领导 只打总分
    setLeaderAddSaScore() {
      saveSimpleAssess([
        {
          totalScore: this.totalScore,
          saveStatus: '1',
          processInstanceId: this.activeUser.processInstanceId || '',
          taskId: this.activeUser.taskId || '',
          scoringSuggestVO: this.scoringSuggestVO,
          scoringExpressionVO: this.scoringExpressionVO,
          assessRank: this.assessRank,
          scoringId: this.activeUser.saScoringId,
          remark: this.reason,
        },
      ]).then(res => {
        if (res.status === 200) {
          this.$message.success('保存成功')
          this.localChangeEvSelectUserList()
        }
      })
    },
    // 修改编辑状态

    editFun() {
      this.isDisabled = !this.isDisabled
    },
    assessFilter(news) {
      if (news === 1) {
        this.totalScore = 100
      } else if (news === 2) {
        this.totalScore = 80
      } else if (news === 3) {
        this.totalScore = 60
      } else if (news === 4) {
        this.totalScore = 0
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.evaluate_score {
  height: 100%;
  .score-con {
    height: calc(100% - 100px);
    padding-bottom: 10px;
  }
  .score_main {
    height: calc(100% - 180px) !important;
  }
  .is_end {
    height: calc(100% - 30px) !important;
  }
  .tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;

    .tit_text {
      .score {
        font-size: 18px;
        color: #a30014;
      }
    }
    .criteria-box {
      display: flex;
      align-items: center;
    }
    .criteria {
      cursor: pointer;
      margin: 0 10px;
    }
    .history {
      color: #409eff;
    }
  }
  // 主要领导评价
  .main-loader {
    .score-table {
      border: 1px solid #333;
      margin-bottom: 30px;
      margin-right: 10px;
      .tab-th,
      .tab-tr {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #333;
        .li {
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          font-size: 14px;
          &:not(:last-of-type) {
            border-right: 1px solid #333;
          }
          &.leader-scoer {
            flex: 1;
            .score {
              color: #a30014;
            }
          }
        }
      }
      .tab-th {
        font-weight: 600;
      }
      .tab-tr {
        border-bottom: 0;
        .calc {
          position: relative;
          .el-icon-info {
            position: absolute;
            right: 0;
            bottom: 0;
            color: #999;
            cursor: pointer;
            font-size: 16px;
          }
        }
      }
    }
  }

  // 打分方式
  .score-type {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    &-tit {
      display: flex;
      font-size: 16px;
      font-weight: 600;
      border-left: 3px solid #fe6b6e;
      padding-left: 10px;
      margin-right: 10px;
    }
    &-con {
      display: flex;
      align-items: center;
      .li {
        margin-left: 20px;
        display: flex;
        align-items: center;
        /deep/.el-radio__label {
          font-size: 16px;
        }
      }
      .number_ipt {
        font-size: 15px;
        /deep/.el-input {
          font-size: inherit !important;
        }
      }
    }
  }
  .entry_list {
    padding: 0 10px;
    margin-bottom: 20px;
    .title_main_one {
      font-size: 16px;
      font-weight: 600;
      border-left: 3px solid #fe6b6e;
      padding-left: 10px;
      margin-bottom: 20px;
      .top_require {
        color: #ff0000;
      }
      .tips {
        color: #666;
        font-size: 14px;
        font-weight: normal;
      }
      span {
        color: #999;
        font-weight: 400;
        font-size: 14px;
      }
    }

    .grade_con {
      width: 80%;
      display: flex;
      .list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 50px;
        .btn {
          width: 90px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          text-align: center;
          border-radius: 4px;
          border: 1px solid #ccc;
          cursor: pointer;
          margin-bottom: 5px;
          color: #333;
          &.active {
            background-color: #e3c79f;
            color: #fff;
            border-color: #e3c79f;
          }
          &.disabled {
            cursor: not-allowed;
          }
        }
        .score_section {
          font-size: 12px;
        }
      }
    }
    .grade_score {
      flex: 1;
      width: 100%;
      .reason_con {
        display: flex;
        align-items: center;
        font-size: 15px;
        .s_label {
          margin-right: 10px;
          width: 40px;
          font-size: 16px;
        }
        .number_ipt {
          margin-right: 5px;
          width: 100px;
        }
        .reason_ipt {
          flex: 1;
          width: 100px;
        }
        .number_ipt {
          font-size: 15px;
          /deep/.el-input {
            font-size: inherit !important;
          }
        }
      }
      .reason_con {
        margin-top: 5px;
      }
    }
  }
  .bottom {
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    .b_btn {
      font-size: 14px;
      padding: 10px 40px;
      border-radius: 4px;
      border: 1px solid #1852a3;
      margin-right: 20px;
      cursor: pointer;
      &.back {
        color: #1852a3;
      }
      &.commit {
        background-color: #1852a3;
        color: #fff;
      }
    }
  }
}
</style>
